<template>
  <center>
    <div id="div1">
      <p>我是Demo01组件</p>
      <button @click="comp">{{count}}</button>
      <br>
      <h3>{{$store.state.number}}</h3>
      <h3>{{$store.getters.numberSquare}}</h3>
    </div>
  </center>
</template>

<script>
  export default {
    name: "Demo01",
    setup(){
      console.log("setup函数被执行")
    },
    data(){
      return{
        count: 0
      }
    },
    methods: {
      comp(){
        this.count ++;
      }
    },
    //Vue实例创建前
    beforeCreate() {
      console.log('beforeCreate Vue实例创建前');
    },
    //Vue实例创建后
    created() {
      console.log('created Vue实例创建后');
    },
    //挂载DOM前
    beforeMount() {
      console.log('beforeMount 挂载DOM前');
    },
    //挂载DOM后
    mounted() {
      console.log('mounted 挂载DOM后');
    },
    //数据更新前
    beforeUpdate() {
      console.log('beforeUpdate 数据更新前');
    },
    //数据更新后
    updated() {
      console.log('updated 数据更新后');
    },
    //实例销毁前
    beforeUnmount() {
      console.log('beforeUnmount 实例销毁前');
    },
    //实例销毁后
    unmounted() {
      console.log('unmounted 实例销毁后');
    }

  }
</script>

<style scoped>
  #div1{
    height: 300px;
    width: 500px;
    background-color: darkseagreen;

  }
</style>